/* 
**
**  $Id: opensuse_boxes.css 21171 2007-06-05 16:08:56Z fs $
**
**  Funktion: Provides all general box styles for openSUSE.org
**  Authors:  Frank Sundermeyer <fs@opensuse.org>
**            Robert Lihm <rlihm@opensuse.org>
**  License:  see copyright/COPYRIGHT
*/

.darkgrey_box,
.darkgrey_box_double,
.orange_box,
.orange_box_double,
.green_box,
.green_box_double,
.blue_box,
.blue_box_double,
.grey_box,
.grey_box_double {
    /* nothing here */
}

.box_top_row {
    display: block;
    height: 10px;
    clear:both;
}

.box_title_row {
    display: block;
}

.box_title {
    display: block;
    padding: 0 .8em 8px .8em;
    margin: 0;
    text-align: center;
    font-weight: bold;
}

.box_left { 
    position: relative;
    float: left;
    width:10px;
    height:10px;
    display: block;
}

.box_right {
    position: relative;
    float: right;
    width:10px;
    height:10px;
    display: block;
}

.box_content {
    background: #FCFCFC;
    border-left: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
    display: block;
    padding: .5em .8em;
}

.box_bottom_row {
    background: url('../images/bottom_middle.png') repeat-x scroll top left;
    display: block;
    height: 10px;
    clear:both;
}

.box_bottom_row .box_left {
    background: url('../images/bottom_left_corner.png') no-repeat scroll top left;
}

.box_bottom_row .box_right {
    background: url('../images/bottom_right_corner.png') no-repeat scroll top right;
}

.box_footer_row {
     display: block;
}

.box_footer {
    display: block;
    padding: 8px .8em 0 .8em;
    margin: 0;
}
/**************
*  Grey box *
**************/

/* Do not move the grey declarations below the others. This order
*  allows to have colored boxes inside the grey one!!
*/

.grey_box .box_top_row,
.grey_box_double .box_top_row {
    background: url('../images/grey_box/top_middle.png') repeat-x scroll bottom left;
}

.grey_box .box_top_row .box_left,
.grey_box_double .box_top_row .box_left {
    background: url('../images/grey_box/top_left_corner.png') no-repeat scroll bottom left;
}

.grey_box .box_top_row .box_right,
.grey_box_double .box_top_row .box_right {
    background: url('../images/grey_box/top_right_corner.png') no-repeat scroll bottom right;
}

.grey_box .box_title_row,
.grey_box_double .box_title_row {
    background: #E0E0E0 url('../images/grey_box/title_right.png') repeat-y scroll top right;
}

.grey_box .box_title,
.grey_box_double .box_title {
    background: url('../images/grey_box/title_left.png') repeat-y scroll top left;
}

.grey_box_double .box_footer_row {
    background: #E0E0E0 url('../images/grey_box/title_right.png') repeat-y scroll top right;
}

.grey_box_double .box_footer {
    background: url('../images/grey_box/title_left.png') repeat-y scroll top left;
}

.grey_box_double .box_bottom_row {
    background: url('../images/grey_box/bottom_middle_grey.png') repeat-x scroll top left;
}

.grey_box_double .box_bottom_row .box_left {
    background: url('../images/grey_box/bottom_left_corner_grey.png') no-repeat scroll top left;
}

.grey_box_double .box_bottom_row .box_right {
    background: url('../images/grey_box/bottom_right_corner_grey.png') no-repeat scroll top right;
}

/* do not move the following three styles - this allows to have grey boxes
*  within a grey doublewbox
*/

.grey_box .box_bottom_row {
    background: url('../images/bottom_middle.png') repeat-x scroll top left;
}

.grey_box .box_bottom_row .box_left {
    background: url('../images/bottom_left_corner.png') no-repeat scroll top left;
}

.grey_box .box_bottom_row .box_right {
    background: url('../images/bottom_right_corner.png') no-repeat scroll top right;
}
/**************
*  Darkgrey box *
**************/

.darkgrey_box .box_top_row,
.darkgrey_box_double .box_top_row {
    background: url('../images/darkgrey_box/top_middle.png') repeat-x scroll bottom left;
}

.darkgrey_box .box_top_row .box_left,
.darkgrey_box_double .box_top_row .box_left {
    background: url('../images/darkgrey_box/top_left_corner.png') no-repeat scroll bottom left;
}

.darkgrey_box .box_top_row .box_right,
.darkgrey_box_double .box_top_row .box_right {
    background: url('../images/darkgrey_box/top_right_corner.png') no-repeat scroll bottom right;
}

.darkgrey_box .box_title_row,
.darkgrey_box_double .box_title_row {
    background: #5D666E url('../images/darkgrey_box/title_right.png') repeat-y scroll top right;
}

.darkgrey_box .box_title,
.darkgrey_box_double .box_title {
    background: url('../images/darkgrey_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}

.darkgrey_box_double .box_footer_row {
    background: #5D666E url('../images/darkgrey_box/title_right.png') repeat-y scroll top right;
}

.darkgrey_box_double .box_footer {
    background: url('../images/darkgrey_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}

.darkgrey_box_double .box_bottom_row {
    background: url('../images/darkgrey_box/bottom_middle_darkgrey.png') repeat-x scroll top left;
}

.darkgrey_box_double .box_bottom_row .box_left {
    background: url('../images/darkgrey_box/bottom_left_corner_darkgrey.png') no-repeat scroll top left;
}

.darkgrey_box_double .box_bottom_row .box_right {
    background: url('../images/darkgrey_box/bottom_right_corner_darkgrey.png') no-repeat scroll top right;
}

/* do not move the following three styles - this allows to have grey boxes
*  within a grey doublebox
*/
.darkgrey_box .box_bottom_row {
    background: url('../images/bottom_middle.png') repeat-x scroll top left;
}

.darkgrey_box .box_bottom_row .box_left {
    background: url('../images/bottom_left_corner.png') no-repeat scroll top left;
}

.darkgrey_box .box_bottom_row .box_right {
    background: url('../images/bottom_right_corner.png') no-repeat scroll top right;
}

/**************
*  Green box *
**************/

.green_box .box_top_row,
.green_box_double .box_top_row {
    background: url('../images/green_box/top_middle.png') repeat-x scroll bottom left;
}

.green_box .box_top_row .box_left,
.green_box_double .box_top_row .box_left {
    background: url('../images/green_box/top_left_corner.png') no-repeat scroll bottom left;
}

.green_box .box_top_row .box_right,
.green_box_double .box_top_row .box_right {
    background: url('../images/green_box/top_right_corner.png') no-repeat scroll bottom right;
}

.green_box .box_title_row,
.green_box_double .box_title_row {
    background: #669900 url('../images/green_box/title_right.png') repeat-y scroll top right;
}

.green_box .box_title,
.green_box_double .box_title {
    background: url('../images/green_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}
.green_box_double .box_footer_row {
    background: #669900 url('../images/green_box/title_right.png') repeat-y scroll top right;
}

.green_box_double .box_footer {
    background: url('../images/green_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}

.green_box_double .box_bottom_row {
    background: url('../images/green_box/bottom_middle_green.png') repeat-x scroll top left;
}

.green_box_double .box_bottom_row .box_left {
    background: url('../images/green_box/bottom_left_corner_green.png') no-repeat scroll top left;
}

.green_box_double .box_bottom_row .box_right {
    background: url('../images/green_box/bottom_right_corner_green.png') no-repeat scroll top right;
}
/* do not move the following three styles - this allows to have grey boxes
*  within a grey doublewbox
*/
.green_box .box_bottom_row {
    background: url('../images/bottom_middle.png') repeat-x scroll top left;
}

.green_box .box_bottom_row .box_left {
    background: url('../images/bottom_left_corner.png') no-repeat scroll top left;
}

.green_box .box_bottom_row .box_right {
    background: url('../images/bottom_right_corner.png') no-repeat scroll top right;
}

/**************
*  Orange box *
**************/

.orange_box .box_top_row,
.orange_box_double .box_top_row {
    background: url('../images/orange_box/top_middle.png') repeat-x scroll bottom left;
}

.orange_box .box_top_row .box_left,
.orange_box_double .box_top_row .box_left {
    background: url('../images/orange_box/top_left_corner.png') no-repeat scroll bottom left;
}

.orange_box .box_top_row .box_right,
.orange_box_double .box_top_row .box_right {
    background: url('../images/orange_box/top_right_corner.png') no-repeat scroll bottom right;
}

.orange_box .box_title_row,
.orange_box_double .box_title_row {
    background: #F59F1A url('../images/orange_box/title_right.png') repeat-y scroll top right;
}

.orange_box .box_title,
.orange_box_double .box_title {
    background: url('../images/orange_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}

.orange_box_double .box_footer_row {
    background: #F59F1A url('../images/orange_box/title_right.png') repeat-y scroll top right;
}

.orange_box_double .box_footer {
    background: url('../images/orange_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}

.orange_box_double .box_bottom_row {
    background: url('../images/orange_box/bottom_middle_orange.png') repeat-x scroll top left;
}

.orange_box_double .box_bottom_row .box_left {
    background: url('../images/orange_box/bottom_left_corner_orange.png') no-repeat scroll top left;
}

.orange_box_double .box_bottom_row .box_right {
    background: url('../images/orange_box/bottom_right_corner_orange.png') no-repeat scroll top right;
}
/* do not move the following three styles - this allows to have grey boxes
*  within a grey doublewbox
*/
.orange_box .box_bottom_row {
    background: url('../images/bottom_middle.png') repeat-x scroll top left;
}

.orange_box .box_bottom_row .box_left {
    background: url('../images/bottom_left_corner.png') no-repeat scroll top left;
}

.orange_box .box_bottom_row .box_right {
    background: url('../images/bottom_right_corner.png') no-repeat scroll top right;
}

/**************
*  Blue box *
**************/

.blue_box .box_top_row,
.blue_box_double .box_top_row {
    background: url('../images/blue_box/top_middle.png') repeat-x scroll bottom left;
}

.blue_box .box_top_row .box_left,
.blue_box_double .box_top_row .box_left {
    background: url('../images/blue_box/top_left_corner.png') no-repeat scroll bottom left;
}

.blue_box .box_top_row .box_right,
.blue_box_double .box_top_row .box_right {
    background: url('../images/blue_box/top_right_corner.png') no-repeat scroll bottom right;
}

.blue_box .box_title_row,
.blue_box_double .box_title_row {
    background: #336699 url('../images/blue_box/title_right.png') repeat-y scroll top right;
}

.blue_box .box_title,
.blue_box_double .box_title {
    background: url('../images/blue_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}
.blue_box_double .box_footer_row {
    background: #336699 url('../images/blue_box/title_right.png') repeat-y scroll top right;
}

.blue_box_double .box_footer {
    background: url('../images/blue_box/title_left.png') repeat-y scroll top left;
    color: #fff;
}

.blue_box_double .box_bottom_row {
    background: url('../images/blue_box/bottom_middle_blue.png') repeat-x scroll top left;
}

.blue_box_double .box_bottom_row .box_left {
    background: url('../images/blue_box/bottom_left_corner_blue.png') no-repeat scroll top left;
}

.blue_box_double .box_bottom_row .box_right {
    background: url('../images/blue_box/bottom_right_corner_blue.png') no-repeat scroll top right;
}
/* do not move the following three styles - this allows to have grey boxes
*  within a grey doublewbox
*/
.blue_box .box_bottom_row {
    background: url('../images/bottom_middle.png') repeat-x scroll top left;
}

.blue_box .box_bottom_row .box_left {
    background: url('../images/bottom_left_corner.png') no-repeat scroll top left;
}

.blue_box .box_bottom_row .box_right {
    background: url('../images/bottom_right_corner.png') no-repeat scroll top right;
}


/****************
*  Header boxes *
****************/

/* Logo */

#logo .box_content_row {
    background: #FCFCFC url('../images/logo/title_right.png') repeat-y scroll top right;
    border: 0;
}

#logo .box_content {
    background: url('../images/logo/title_left.png') repeat-y scroll top left;
    border: 0;
}
#logo .box_bottom_row {
    background: url('../images/logo/bottom_middle_grey.png') repeat-x scroll top left;
    height:14px;
}
#logo .box_left {
    background:
    url('../images/logo/bottom_left_corner_grey.png') no-repeat scroll top left;
    height:14px;
}
#logo .box_right {
    background: url('../images/logo/bottom_right_corner_grey.png') no-repeat
    scroll top right;
    height:14px;
}

/* Darkgrey */

#banner_darkgrey .box_content_row {
    background: #5D666E url('../images/darkgrey_headerbox/title_right.png') repeat-y scroll top right;
}
#banner_darkgrey .box_content {
    background: url('../images/darkgrey_headerbox/title_left.png') repeat-y scroll top left;
}
#banner_darkgrey .box_bottom_row {
    background: url('../images/darkgrey_headerbox/bottom_middle_darkgrey.png') repeat-x scroll top left;
    height:14px;
}

#banner_darkgrey .box_left {
    background:
    url('../images/darkgrey_headerbox/bottom_left_corner_darkgrey.png') no-repeat scroll top left;
    height:14px;
}
#banner_darkgrey .box_right {
    background: url('../images/darkgrey_headerbox/bottom_right_corner_darkgrey.png') no-repeat scroll top right;
    height:14px;
}

/* Green */

#banner_green .box_content_row {
    background: #669900 url('../images/green_headerbox/title_right.png') repeat-y scroll top right;
}
#banner_green .box_content {
    background: url('../images/green_headerbox/title_left.png') repeat-y scroll top left;
}
#banner_green .box_bottom_row {
    background: url('../images/green_headerbox/bottom_middle_green.png') repeat-x scroll top left;
    height:14px;
}

#banner_green .box_left {
    background:
    url('../images/green_headerbox/bottom_left_corner_green.png') no-repeat scroll top left;
    height:14px;
}
#banner_green .box_right {
    background: url('../images/green_headerbox/bottom_right_corner_green.png') no-repeat scroll top right;
    height:14px;
}

/* Orange */

#banner_orange .box_content_row {
    background: #F59F1A url('../images/orange_headerbox/title_right.png') repeat-y scroll top right;
}
#banner_orange .box_content {
    background: url('../images/orange_headerbox/title_left.png') repeat-y scroll top left;
}
#banner_orange .box_bottom_row {
    background: url('../images/orange_headerbox/bottom_middle_orange.png') repeat-x scroll top left;
    height:14px;
}

#banner_orange .box_left {
    background: url('../images/orange_headerbox/bottom_left_corner_orange.png') no-repeat scroll top left;
    height:14px;
}
#banner_orange .box_right {
    background: url('../images/orange_headerbox/bottom_right_corner_orange.png') no-repeat scroll top right;
    height:14px;
}

/* Blue */

#banner_blue .box_content_row {
    background: #336699 url('../images/blue_headerbox/title_right.png') repeat-y scroll top right;
}
#banner_blue .box_content {
    background: url('../images/blue_headerbox/title_left.png') repeat-y scroll top left;
}
#banner_blue .box_bottom_row {
    background: url('../images/blue_headerbox/bottom_middle_blue.png') repeat-x scroll top left;
    height:14px;
}

#banner_blue .box_left {
    background:
    url('../images/blue_headerbox/bottom_left_corner_blue.png') no-repeat scroll top left;
    height:14px;
}
#banner_blue .box_right {
    background: url('../images/blue_headerbox/bottom_right_corner_blue.png') no-repeat scroll top right;
    height:14px;
}